<template>
  <div class="qingwu">
    <div class="admin_table_page_title">家政分类</div>
    <div class="unline underm"></div>

    <estate-search
      :searchConfig="searchConfig"
      @searchParams="search"
    ></estate-search>

    <div class="admin_table_handle_btn">
      <a-button
        @click="$router.push('/Estate/house_cate/form')"
        type="primary"
        icon="plus"
        >添加</a-button
      >
      <a-button
        class="admin_delete_btn"
        type="danger"
        icon="delete"
        @click="del"
        >批量删除</a-button
      >
    </div>
    <div class="admin_table_list">
      <a-table
        :columns="columns"
        :data-source="list"
        :pagination="false"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        row-key="id"
      >
        <span slot="is_show" slot-scope="rows">
          <a-switch
            v-if="rows.is_show == 1"
            checked-children="启用"
            un-checked-children="禁用"
            @change="onChangeStatus(rows.id)"
            default-checked
          />
          <a-switch
            v-else
            checked-children="正常"
            @change="onChangeStatus(rows.id)"
            un-checked-children="禁用"
          />
        </span>

        <span slot="action" slot-scope="rows">
          <a-button
            icon="edit"
            @click="$router.push('/Estate/house_cate/form/' + rows.id)"
            >编辑</a-button
          >
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
import estateSearch from "@/components/estate/search";
export default {
  components: { estateSearch },
  props: {},
  data() {
    return {
      params: {
        page: 1,
        per_page: 30,
        type: 1,
      },
      total: 0, //总页数
      searchConfig: [{ label: "名称", name: "title", type: "text" }],
      selectedRowKeys: [], // 被选择的行
      columns: [
        { title: "名称", dataIndex: "title" },
        { title: "排序", dataIndex: "sort" },
        { title: "状态", key: "id", scopedSlots: { customRender: "is_show" } },
        { title: "创建时间", fixed: "right", dataIndex: "create_time" },
        {
          title: "操作",
          key: "id",
          fixed: "right",
          scopedSlots: { customRender: "action" },
        },
      ],
      list: [],
    };
  },
  watch: {},
  computed: {},
  methods: {
    search(params) {
      let page = this.params.page;
      let per_page = this.params.per_page;
      this.params = params;
      this.params.page = page;
      this.params.per_page = per_page;
      this.onload();
    },
    // 选择框被点击
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    onChangeStatus(id) {
      this.$post(this.$api.editHouseCateShow, { id: id, type: 1 }).then(
        (res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
          } else {
            return this.$message.error(res.msg);
          }
        }
      );
    },
    // 删除
    del() {
      if (this.selectedRowKeys.length == 0) {
        return this.$message.error("未选择数据.");
      }
      this.$confirm({
        title: "你确定要删除选择的数据？",
        content: "确定删除后无法恢复.",
        okText: "是",
        okType: "danger",
        cancelText: "取消",
        onOk: () => {
          let ids = this.selectedRowKeys.join(",");
          this.$delete(this.$api.houseCate + "/" + ids).then((res) => {
            if (res.code == 200) {
              this.onload();
              this.$message.success("删除成功");
            } else {
              this.$message.error(res.msg);
            }
          });
        },
      });
    },
    onload() {
      this.$get(this.$api.houseCate, this.params).then((res) => {
        this.list = res.data.data;
      });
    },
  },
  created() {
    this.onload();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
</style>
